<template>
  <div>
    <button @click="changefn">情况三ref定义的监听基本数据类型</button>

    <div>数量：{{ age }}</div>
  </div>
</template>
<script setup lang="ts"  name= "person555">
import { reactive, ref, toRefs, toRef, computed, watch } from "vue"; //使用那个函数前必须先导入那个函数

let age = reactive({
  name: "张三",
  ages: 15,
  son: {
    name: "儿子", //需求现在我只想监测其中某一个值的改变  不想监听整个对象
    age: 2,
  },
});

let changefn = () => {
  age.ages = age.ages + 1;
};
// 1情况 watch(age.ages,"回调函数")  //这样写不支持
// watch("写成一个函数","回调函数") 且必须return   本质我的眼里只有你  其他的改变我不去监听
//写成函数的前提是 监听的这个是某一个属性值(基本数据类型)   不是对象里其中的某个对象
// watch(
//   () => {
//     return age.ages;
//   },
//   (newvalue, oldvalue) => {
//     console.log("age变化啦", newvalue, oldvalue); //新值旧值可能一样 这个不仅在vue3中有这个问题,vue2中也有这个问题,若直接替换内存地址  他的新旧之不同
//   }
// );

// 情况2这个有深度好好理解理解 如果要监听对象里面其中某个对象  一定要写成函数第一个参数 ,且第三个参数deep开启  ,若不开启  当son里面某个细节改变时候监听不到,地址改变时候能监听到
watch(
  () => {
    return age.son;
  },
  (newvalue, oldvalue) => {
    console.log("age变化啦", newvalue, oldvalue); //新值旧值可能一样 这个不仅在vue3中有这个问题,vue2中也有这个问题,若直接替换内存地址  他的新旧之不同
  },
  { deep: true }
);
</script>